<include file="public@head_top"/>
<include file="public@member_top"/>
</head>
<body class="bgeee">
<include file="public@head"/>
<style type="text/css">
	.tab-content {
		overflow: visible;
	}

	.uploaded_avatar_area {
		padding: 10px 0;
	}

	.uploaded_avatar_btns {
		margin-top: 20px;
	}

	.uploaded_avatar_area .uploaded_avatar_btns {
		display: none;
	}
	@media ( max-width: 575px) {
		.listContentBlock .form-group{ padding:15px 0;}
	}
</style>

<div class="wrap clearfloat tc-main">
	<div class="row">
    
        <div class="col-lg-3 leftnav">
            <include file="public@usernav" />
        </div>
        
		<div class="col-lg-9 rightmain">

                <div class="card-header usertitle">
                    <ul class="nav nav-tabs card-header-tabs">
                      <li class="nav-item">
                        <a class="nav-link active" href="#one" data-toggle="tab"><i class="fa fa-user"></i> 修改头像</a>
                      </li>
                    </ul>
                  </div>
                  
                <div class="tab-content usercontent listContentBlock">
                    <div class="tab-pane active" id="one">
                        <form class="js-ajax-form" action="{:url('user/profile/editPost')}" method="post">
                            <div class="form-group row">
                                <label class="col-3 col-form-label">头像</label>
                                <div class="col-9 col-sm-7 listbox">
                                    <if condition="empty($avatar)">
                                        <img src="__TMPL__/public/assets/images/headicon_128.png" class="headicon" width="128"/>
                                        <else/>
                                        <img src="{:cmf_get_user_avatar_url($avatar)}?t={:time()}" class="headicon" width="128"/>
                                    </if>
                                </div>
                              </div>
                              <div class="form-group row">
                                <label class="col-3 col-form-label">上传</label>
                                <div class="col-9 col-sm-7 listbox">
                                    <input type="file" onchange="avatar_upload(this)" id="avatar_uploder" name="file"/>
                                    <div class="uploaded_avatar_area">
                                        <div class="uploaded_avatar_btns">
                                            <a class="btn btn-secondary confirm_avatar_btn" onclick="update_avatar()" style="color:#fff;">确定</a>
                                            <a class="btn" onclick="reloadPage()">取消</a>
                                        </div>
                                    </div>
                                    <p class="help-block">头像支持jpg,png,jpeg格式,文件大小最大不能超过1M</p>
                                </div>
                              </div>
                        </form>
                    </div>
                </div>
                
        </div>
        
    </div>
</div>
<!-- /container -->

<script type="text/javascript">
    function update_avatar() {
        var area = $(".uploaded_avatar_area img").data("area");
        $.post("{:url('Profile/avatarUpdate')}", area, function (data) {
            if (data.code == 1) {
                reloadPage(window);
            }

        }, "json");

    }
    function avatar_upload(obj) {
        var $fileinput = $(obj);
        /* $(obj)
         .show()
         .ajaxComplete(function(){
         $(this).hide();
         }); */
        Wind.css("jcrop");
        Wind.use("ajaxfileupload", "jcrop", "noty", function () {
            $.ajaxFileUpload({
                url: "{:url('Profile/avatarUpload')}",
                secureuri: false,
                fileElementId: "avatar_uploder",
                dataType: 'json',
                data: {},
                success: function (data, status) {

                    if (data.code == 1) {
                        $("#avatar_uploder").hide();
                        var $uploaded_area = $(".uploaded_avatar_area");
                        $uploaded_area.find("img").remove();
                        var src  = "__ROOT__/upload/" + data.data.file;
                        var $img = $("<img/>").attr("src", src);
                        $img.prependTo($uploaded_area);
                        $(".uploaded_avatar_btns").show();
                        var img = new Image();
                        img.src = src;

                        var callback = function () {
                            console.log(img.width);
                            $img.Jcrop({
                                aspectRatio: 1,
                                trueSize: [img.width, img.height],
                                setSelect: [0, 0, 100, 100],
                                onSelect: function (c) {
                                    $img.data("area", c);
                                }
                            });
                        }

                        if (img.complete) {
                            callback();
                        } else {
                            img.onload = callback;
                        }

                    } else {
                        noty({
                            text: data.msg,
                            type: 'error',
                            layout: 'center',
                            callback: {
                                afterClose: function () {
                                    reloadPage(window);
                                }
                            }
                        });
                    }

                },
                error: function (data, status, e) {
                }
            });
        });

        return false;
    }
</script>

<include file="public@footer"/>
<include file="public@member_scripts"/>
</body>    
</html>